<template>
<cate-search></cate-search>
  <div class="col-md-12">
    <div class="col-md-3">
      <cate-menu :activeCateId="activatedCateId"></cate-menu>
    </div>
    <div class="col-md-7 goods-detail-wrapper">
      <product-detail :product="product"></product-detail>
    </div>
    <div class="col-md-2"></div>
  </div>
</template>
<script>
import { http } from "../utils/http";
import CateMenu from "../components/CateMenu.vue";
import ProductDetail from "../components/ProductDetail.vue";
import CateSearch from "../components/CateSearchBar.vue";
export default {
  components: {
    CateMenu,
    ProductDetail,
    CateSearch
  },
  data() {
    return {
      activatedCateId:0,
      product:{
      }
    }
  },
  methods: {
    fetchProductDetail(goodsId){
      http.get('/goods/getGoodsDetailById',{params:{goodsId:goodsId}})
      .then(resp=>{
        this.product={
         ...resp.data.goodsDetail,
        }
        this.activatedCateId=this.product.cateId;
      })
    }
  },
  beforeRouteUpdate(to) {
    const goodsId=to.params.id;
    this.fetchProductDetail(goodsId)
   },
  created(){
      let goodsId=this.$route.params.id;
      this.fetchProductDetail(goodsId)
  }
};
</script>
